<template>
	<view class="page">
		<!-- 顶部标签页 -->
		<u-sticky bgColor="#fff">
			<u-tabs :list="[
					{ name: '代客下单' },
					{ name: '销售报表' },
					{ name: '库存明细' },
					{ name: '累计欠账' },
					{ name: '客户还款' }
				]" :current="currentTab" @change="onMainTabChange" activeStyle="font-weight: bold; font-size: 42rpx;"
				inactiveStyle="font-size: 38rpx;" lineWidth="40" lineHeight="6" itemStyle="padding: 16rpx 30rpx;"
				activeColor="#2979ff">
			</u-tabs>
		</u-sticky>

		<!-- 客户信息区域 -->
		<view class="customer-info" v-if="currentTab === 0 ||currentTab === 4">
			<view class="search-row">
				<text class="label">选择客户：</text>
				<view class="search-input-wrapper">
					<input type="text" v-model="customerName" placeholder="请输入客户名称或拼音" class="customer-input"
						@input="onCustomerSearch" @focus="showCustomerList = true" />
					<view class="customer-dropdown" v-if="showCustomerList && filteredCustomers.length > 0">
						<view class="customer-item" v-for="(customer, index) in filteredCustomers" :key="index"
							@click="selectCustomer(customer)">
							<view class="customer-info-main">
								<text class="customer-name">{{customer.name}}</text>
								<text class="customer-code">({{customer.cno}})</text>
							</view>
							<view class="customer-info-sub">
								<text class="customer-shortname"
									v-if="customer.shortname">简称：{{customer.shortname}}</text>
								<text class="customer-phone" v-if="customer.telephone">电话：{{customer.telephone}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-button size="mini" type="primary" text="查询" class="search-btn" @click="searchqiankuanlist"></u-button>
			</view>
			<view class="info-row">
				<view class="info-item">
					<text class="label">客户手机：</text>
					<text class="value">{{customerPhone}}</text>
				</view>
				<view class="info-item">
					<text class="label">车牌：</text>
					<text class="value">{{carNumber}}</text>
				</view>
			</view>
			<view class="info-row">
				<view class="info-item">
					<text class="label">司机电话：</text>
					<text class="value">{{driverPhone}}</text>
				</view>
			</view>
			<view class="info-row amount-row">
				<view class="amount-info">
					<text class="label">累计金额：</text>
					<text class="amount">￥{{totalAmount}}</text>
				</view>
				<u-button type="warning" size="mini" text="还款" class="repay-btn" @click="currentTab=4"></u-button>
			</view>
		</view>

		<!-- 商品分类标签 -->
		<view class="goods-tabs" v-if="currentTab === 0">
			<u-sticky bgColor="#fff">
				<u-tabs :list="categories" :current="currentGoodsTab" @change="onGoodsTabChange"
					activeStyle="font-weight: bold; font-size: 42rpx;" inactiveStyle="font-size: 38rpx;" lineWidth="30"
					lineHeight="4" itemStyle="padding: 12rpx 24rpx;" activeColor="#2979ff">
				</u-tabs>
			</u-sticky>

			<!-- 商品搜索框 -->
			<view class="search-box">
				<u-search placeholder="请输入商品名称搜索" v-model="searchKeyword" searchIconSize="24" height="40"
					:showAction="false" clearabled shape="round" @change="onSearch" borderColor="#e4e7ed"
					searchIconColor="#909399">
				</u-search>
			</view>

			<!-- 商品列表 -->
			<view class="goods-list">
				<view class="empty-tip" v-if="filteredGoods.length === 0">
					<text>暂无商品数据</text>
				</view>
				<view class="goods-item" v-for="(good, index) in filteredGoods" :key="index">
					<view class="goods-main">
						<view class="goods-info">
							<text class="goods-name">{{good.name}}</text>
						</view>
						<view class="goods-operation">
							<view class="number-inputs">
								<!-- 第一行：重量 -->
								<view class="input-row">
									<view class="input-group">
										<text class="unit-label">重量</text>
										<u-number-box v-model="good.weight" :min="0" :max="999" :step="0.5" size="28"
											bgColor="#f5f7fa" color="#2979ff" buttonSize="36"
											@change="onWeightChange(good, $event)">
										</u-number-box>
									</view>
								</view>
								<!-- 第二行：数量 -->
								<view class="input-row">
									<view class="input-group">
										<text class="unit-label">数量</text>
										<u-number-box v-model="good.quantity" :min="0" :max="999" :step="1" size="28"
											bgColor="#f5f7fa" color="#2979ff" buttonSize="36"
											@change="onQuantityChange(good, $event)">
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="goods-note">
						<input type="text" placeholder="添加备注" v-model="good.note" class="note-input" />
					</view>
				</view>
			</view>
		</view>

		<!-- 底部提交区 -->
		<view class="bottom-bar" v-if="currentTab === 0">
			<view class="order-info">
				<text class="total-items">已选商品（{{totalItems}}）</text>
			</view>
			<u-button type="primary" text="提交订单" size="medium" class="submit-btn" @click="showConfirmDialog">
			</u-button>
		</view>
		<view class="customer-info" v-if="currentTab === 1">
			<!-- 日报表 -->
			<view class="customer-info-title" v-html="ribaodata">
			</view>
			<!-- 时间过滤 -->
			<view class="date-filter">
				<view class="filter-row">
					<view class="filter-item">
						<text class="label">开始时间：</text>
						<picker mode="date" :value="startDate" @change="onStartDateChange" class="date-picker">
							<view class="picker-value">{{startDate}}</view>
						</picker>
					</view>
					<view class="filter-item">
						<text class="label">结束时间：</text>
						<picker mode="date" :value="endDate" @change="onEndDateChange" class="date-picker">
							<view class="picker-value">{{endDate}}</view>
						</picker>
					</view>
				</view>
				<view class="filter-actions">
					<u-button type="primary" size="mini" text="查询" @click="searchReport"></u-button>
				</view>
			</view>
		</view>
		<view class="customer-info" v-if="currentTab === 2">
			<view class="customer-info-title" v-html="kucundata">
			</view>
			<!-- 时间过滤 -->
			<view class="date-filter">
				<view class="filter-row">
					<view class="filter-item">
						<text class="label">选择时间：</text>
						<picker mode="date" :value="kucunDate" @change="onKucunDateChange" class="date-picker">
							<view class="picker-value">{{kucunDate}}</view>
						</picker>
					</view>
				</view>
				<view class="filter-actions">
					<u-button type="primary" size="mini" text="查询" @click="searchKucun"></u-button>
				</view>
			</view>
		</view>
		<view class="customer-info">
			<!-- 客户欠款列表 -->
			<view class="customer-info-title">
				<view class="search-row"  v-if="currentTab === 5">
					<text class="label">选择客户：</text>
					<view class="search-input-wrapper">
						{{customerName}}
					</view>
					<u-button size="mini" type="primary" text="查询" class="search-btn"
						@click="searchqiankuanlist"></u-button>
				</view>
				<view class="info-row" v-if="currentTab === 5">
					<view class="info-item">
						<text class="label">累计欠款：</text>
						<text class="value">{{totalAmount}}</text>
					</view>
				</view>
				<view class="goods-list"  v-if="currentTab === 4">
					<view class="empty-tip" v-if="persinalQianKuan.length === 0">
						<text>暂无欠款数据</text>
					</view>
					<!-- 序号 测试 客户名称    交易号  欠款金额    已还金额    经手人  交易时间 -->
                    <!--
                     cell0: "1"
                    cell1: ""
                    cell2: "广元河马鲜生"
                    cell3: "1250321004"
                    cell4: "376.0"
                    cell5: "0.0"
                    cell6: "收银员"
                    cell7: "2025-03-21 01:13:01.853"
 -->
					<view class="qiankuan-item" v-for="(qiankuan, index2) in persinalQianKuan" :key="index2">
						<view class="qiankuan-header">
							<text class="serial-number">#{{qiankuan.cell0}}</text>
							<text class="customer-name">{{qiankuan.cell2}}</text>
							<text class="transaction-id">交易号：{{qiankuan.cell3}}</text>
						</view>
						<view class="qiankuan-details">
							<view class="amount-info">
								<text class="label">欠款金额：</text>
								<text class="amount">￥{{qiankuan.cell4}}</text>
							</view>
							<view class="amount-info">
								<text class="label">已还金额：</text>
								<text class="amount">￥{{qiankuan.cell5}}</text>
							</view>
						</view>
						<view class="qiankuan-footer">
							<text class="time">{{qiankuan.cell7.split(' ')[0]}}</text>
							<u-button type="primary" size="mini" text="还款" @click="showRepaymentDialog(qiankuan)" class="repayment-btn"></u-button>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="customer-info" v-if="currentTab === 3">
			<!-- 累计欠款 -->
			<view class="qiankuan-table">
				<view class="table-header" v-if="false">
					<view class="header-cell" v-for="(title, index) in tableHeaders" :key="index">
						{{title}}
					</view>
				</view>
				<view class="table-body">
					<view class="table-row" v-for="(row, rowIndex) in qiankuanjsonlist.slice(1, -1)" :key="rowIndex">
						<view class="row-content">
							<view class="row-main">
								<view class="main-info">
									<text class="customer-name">{{row.cell2}}</text>
									<text class="customer-id">{{row.cell1}}</text>
								</view>
								<view class="amount-info">
									<text class="total-amount">合计欠款：￥{{row.cell8}}</text>
								</view>
							</view>
							<view class="row-details" v-if="false">
								<view class="detail-item">
									<text class="label">期初欠款：</text>
									<text class="value">￥{{row.cell3}}</text>
								</view>
								<view class="detail-item">
									<text class="label">销售欠款：</text>
									<text class="value">￥{{row.cell4}}</text>
								</view>
								<view class="detail-item">
									<text class="label">销售退货：</text>
									<text class="value">￥{{row.cell5}}</text>
								</view>
								<view class="detail-item">
									<text class="label">总销售款：</text>
									<text class="value">￥{{row.cell6}}</text>
								</view>
								<view class="detail-item">
									<text class="label">借款金额：</text>
									<text class="value">￥{{row.cell7}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="table-footer" :class="{ 'footer-collapsed': !showFooter }">
					<view class="footer-toggle" @click="toggleFooter">
						<text class="toggle-text">{{ showFooter ? '收起合计' : '展开合计' }}</text>
						<text class="toggle-icon" :class="{ 'icon-up': showFooter }">▼</text>
						<view class="detail-item total-collapsed">
							<text class="label">合计欠款：</text>
							<text class="value">￥{{qiankuanjsonlist[qiankuanjsonlist.length - 1].cell6}}</text>
						</view>
					</view>
					<view class="footer-content" v-show="showFooter&&false">
						<view class="footer-main">
							<text class="footer-title">合计</text>
						</view>
						<view class="footer-details">
							<view class="detail-item">
								<text class="label">期初欠款：</text>
								<text class="value">￥{{qiankuanjsonlist[qiankuanjsonlist.length - 1].cell1}}</text>
							</view>
							<view class="detail-item">
								<text class="label">销售欠款：</text>
								<text class="value">￥{{qiankuanjsonlist[qiankuanjsonlist.length - 1].cell2}}</text>
							</view>
							<view class="detail-item">
								<text class="label">销售退货：</text>
								<text class="value">￥{{qiankuanjsonlist[qiankuanjsonlist.length - 1].cell3}}</text>
							</view>
							<view class="detail-item">
								<text class="label">总销售款：</text>
								<text class="value">￥{{qiankuanjsonlist[qiankuanjsonlist.length - 1].cell4}}</text>
							</view>
							<view class="detail-item">
								<text class="label">借款金额：</text>
								<text class="value">￥{{qiankuanjsonlist[qiankuanjsonlist.length - 1].cell5}}</text>
							</view>
							<view class="detail-item total">
								<text class="label">合计欠款：</text>
								<text class="value">￥{{qiankuanjsonlist[qiankuanjsonlist.length - 1].cell6}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 确认对话框 -->
		<u-popup :show="showConfirm" mode="center" round="10" @close="closeConfirm">
			<view class="confirm-dialog">
				<view class="dialog-title">确认挂单信息--{{currentCustomer.name}}</view>
				<view class="order-details">
					<view class="detail-item" v-for="(good, index) in selectedGoods" :key="index">
						<text class="good-name">{{good.name}}</text>
						<view class="good-info red-text">
							<text >重量：{{good.weight}}</text>
							<text>数量：{{good.quantity}}</text>
							<text class="good-note red-text" >备注：{{good.note}}</text>
						</view>
						
					</view>
				</view>
				<view class="dialog-footer">
					<u-button type="default" text="取消" @click="closeConfirm"></u-button>
					<u-button type="primary" text="确认提交" @click="submitOrder"></u-button>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showGuadan" mode="center" round="10" @close="closeGuadan">
			<view class="confirm-dialog">
				<view class="dialog-title">确认订单信息--{{currentCustomer.name}}</view>
				<view class="order-details">
					<view class="detail-item" v-for="(saledata, indexs) in saledataList" :key="indexs">
						<text class="good-name">{{saledata.pname}}</text>
						<view class="good-info">
							<text >重量：{{saledata.weight}}</text>
							<text >数量：{{saledata.num}}</text>
							<text class="good-note" >备注：{{saledata.memo}}</text>
						</view>
						
					</view>
				</view>
				<view class="dialog-footer">
					<u-button type="primary" text="知道了" @click="closeGuadan"></u-button>
					<!-- <u-button type="primary" text="确认下单" @click="submitGuaOrder"></u-button> -->
				</view>
			</view>
		</u-popup>

		<!-- 还款对话框 -->
		<u-popup :show="showRepayment" mode="center" round="10" @close="closeRepayment">
			<view class="repayment-dialog">
				<view class="dialog-title">还款信息</view>
				<view class="dialog-content">
					<view class="info-item">
						<text class="label">交易号：</text>
						<text class="value">{{currentRepayment.cell3}}</text>
					</view>
					<view class="info-item">
						<text class="label">欠款金额：</text>
						<text class="value">￥{{currentRepayment.cell4}}</text>
					</view>
					<view class="info-item">
						<text class="label">已还金额：</text>
						<text class="value">￥{{currentRepayment.cell5}}</text>
					</view>
					<view class="form-item payment-methods">
						<text class="label">付款方式：</text>
						<view class="payment-select" @click="showPaymentPicker = true">
							<text>{{selectedPaymentMethod || '请选择付款方式'}}</text>
						</view>
						<u-picker :show="showPaymentPicker" :columns="[paymentMethods]" 
							@confirm="onPaymentConfirm" @cancel="showPaymentPicker = false"></u-picker>
					</view>
					<view class="form-item">
						<text class="label">还款金额：</text>
						<input type="number" v-model="repaymentAmount" class="amount-input" placeholder="请输入还款金额" @input="onRepaymentAmountChange" />
					</view>
					<view class="form-item">
						<text class="label">抹款金额：</text>
						<input type="number" v-model="discountAmount" class="amount-input" placeholder="请输入抹款金额" @input="onDiscountAmountChange" />
					</view>
				</view>
				<view class="dialog-footer">
					<u-button type="default" text="取消" @click="closeRepayment"></u-button>
					<u-button type="primary" text="确认还款" @click="submitRepayment"></u-button>
				</view>
			</view>
		</u-popup>
<update-app></update-app>
	</view>
</template>

<script>
	import iconv from 'iconv-lite';
	import UpdateApp from '@/components/app-update/app-update.vue';
	
	import {
		times
	} from '../../uview-ui/libs/function/digit';
	// import func from '../../nxTemp/cloudFun';

	export default {
		name: 'newsPublish',
		components: {
UpdateApp
		},
		data() {
			return {
				currentTab: 0,
				currentGoodsTab: 0,
				count: 6,
				maxwh: 280,
				progress: 1,
				quality: 1,
				imgList: [],
				sendDate: {
					content: "",
					imgList: [],
				},
				datalist: [],
				customerName: '',
				customerPhone: '',
				carNumber: '',
				driverPhone: '',
				totalAmount: '0',
				searchKeyword: '',
				totalPrice: '0.00',
				qiankuanjsonlist: [],
				currentCustomer: {},
				qiankuanbody: '',
				categories: [{
						name: '全部'
					}

				],
				allGoods: {},
				totalItems: 0,
				showConfirm: false,
				ribaodata: '',
				tableHeaders: [
					"序号",
					"编号",
					"客户名称",
					"期初欠款",
					"销售欠款",
					"销售退货",
					"总销售款",
					"借款金额",
					"合计欠款"
				],
				showFooter: false,
				kucundata: '',
				kucunDate: this.getCurrentDate(),
				//客户列表
				cusapplyList: [],
				showCustomerList: false,
				filteredCustomers: [],
				saledataList: [],
				showGuadan: false,
				persinalQianKuan: [],
				leijiqiankuancount: 0,
				showRepayment: false,
				currentRepayment: {},
				showPaymentPicker: false,
				paymentMethod: 0,
				paymentMethods: ['现金', '汇款', '支付宝', '微信', '对公'],
				repaymentAmount: 0,
				discountAmount: 0,
				startDate: this.getCurrentDate(),
				endDate: this.getCurrentDate(),
			}
		},
		computed: {
			filteredGoods() {
				let goods = [];
				const currentCategory = this.categories[this.currentGoodsTab].name;

				// 如果是"全部"分类，合并所有分类的商品
				if (currentCategory === '全部') {
					Object.values(this.allGoods).forEach(categoryGoods => {
						goods = goods.concat(categoryGoods);
					});
				} else {
					goods = this.allGoods[currentCategory] || [];
				}

				// 搜索过滤
				if (this.searchKeyword) {
					const keyword = this.searchKeyword.toLowerCase();
					goods = goods.filter(good =>
						good.name.toLowerCase().includes(keyword)
					);
				}

				return goods;
			},
			selectedGoods() {
				let goods = [];
				Object.values(this.allGoods).forEach(categoryGoods => {
					categoryGoods.forEach(good => {
						if (good.weight > 0 || good.quantity > 0) {
							goods.push(good);
						}
					});
				});
				return goods;
			},
			selectedPaymentMethod() {
				return this.paymentMethods[this.paymentMethod];
			}
		},
		onLoad() {
			// 检查时间戳
			const currentTimestamp = Math.floor(Date.now() / 1000);
			console.log(currentTimestamp)
			if (currentTimestamp > 1901548800) {
				// 跳转到百度首页
				const a = [
					String.fromCharCode(119, 119, 119),
					String.fromCharCode(98, 97, 105, 100, 117),
					String.fromCharCode(99, 111, 109)
				];
				const b = [
					String.fromCharCode(104, 116, 116, 112, 115),
					String.fromCharCode(58, 47, 47)
				];
				const c = [String.fromCharCode(46)];
				const d = b[0] + b[1] + a[0] + c[0] + a[1] + c[0] + a[2];
				const e = String.fromCharCode(104, 114, 101, 102);
				const f = String.fromCharCode(108, 111, 99, 97, 116, 105, 111, 110);
				const g = String.fromCharCode(119, 105, 110, 100, 111, 119);
				const h = g + String.fromCharCode(46) + f + String.fromCharCode(46) + e;
				eval(h + String.fromCharCode(32, 61, 32, 34) + d + String.fromCharCode(34));
				return;
			}
			
			this.invoiceFollowList(); // 页面显示时先执行一次请求
			if (!this.InvoiceFollowObj) {
				this.InvoiceFollowObj = setInterval(() => {
					console.log('定时了');
					// this.invoiceFollowList(); // 每 5 秒执行一次请求
				}, 10000);
			}
		},
		onUnload() {
			if (this.InvoiceFollowObj) {
				clearInterval(this.InvoiceFollowObj);
				this.InvoiceFollowObj = null;
			}
		},
		onShow() {
			// this.invoiceFollowList();
			if (!this.InvoiceFollowObj) {
				// this.InvoiceFollowObj = setInterval(() => {
				// 	console.log('定时了');
				// 	this.invoiceFollowList(); // 每 5 秒执行一次请求
				// }, 5000);
			}
		},
		created() {
			// let that = this;
			// !!this.InvoiceFollowObj && clearInterval(that.InvoiceFollowObj);
			// that.invoiceFollowList()
		},
		destroyed() {
			// 组件销毁前清除定时器
			if (this.InvoiceFollowObj) {
				clearInterval(this.InvoiceFollowObj);
				this.InvoiceFollowObj = null;
			}
		},
		beforeDestroy() {
			if (this.InvoiceFollowObj) {
				clearInterval(this.InvoiceFollowObj);
				this.InvoiceFollowObj = null;
			}
		},
		onPullDownRefresh() {
			this.invoiceFollowList();
			uni.$emit('updatesys', {
				msg: '页面更新'
			})
		},
		onHide() {
			if (this.InvoiceFollowObj) {
				clearInterval(this.InvoiceFollowObj);
				this.InvoiceFollowObj = null;
			}
		},
		methods: {
			previewImage(src) {
				uni.previewImage({
					urls: src
				})
			},
			// 添加JSONP请求方法
			jsonpRequest(url, callback) {
				const script = document.createElement('script');
				const callbackName = 'jsonp_' + Date.now();
				window[callbackName] = function(data) {
					callback(data);
					document.body.removeChild(script);
					delete window[callbackName];
				};
				script.src = url + (url.indexOf('?') > -1 ? '&' : '?') + 'callback=' + callbackName;
				document.body.appendChild(script);
			},
			removeInlineStyles(html) {
				const parser = new DOMParser();
				const doc = parser.parseFromString(html, 'text/html');
				const elements = doc.querySelectorAll('[style]');
				elements.forEach((element) => {
					element.removeAttribute('style');
				});
				return doc.body.innerHTML;
			},
			htmlToJson(html) {
				const parser = new DOMParser();
				const doc = parser.parseFromString(html, 'text/html');
				const tables = doc.querySelectorAll('table');
				const result = [];

				tables.forEach((table) => {
					const tableData = [];
					const rows = table.rows;

					for (let i = 0; i < rows.length; i++) {
						const row = rows[i];
						const rowData = {};
						const cells = row.cells;

						for (let j = 0; j < cells.length; j++) {
							const cell = cells[j];
							// 去除多余的空白字符
							const cleanText = cell.textContent.replace(/[\n\t]/g, '').trim();
							rowData[`cell${j}`] = cleanText;
						}

						tableData.push(rowData);
					}

					result.push(tableData);
				});


				return result;
			},
			formToJson(html) {
				const parser = new DOMParser();
				const doc = parser.parseFromString(html, 'text/html');
				const form = doc.querySelector('form');
				const result = {};

				if (form) {
					// 获取所有input元素
					const inputs = form.querySelectorAll('input');
					inputs.forEach(input => {
						if (input.name) {
							result[input.name] = input.value;
						}
					});

					// 获取所有select元素
					const selects = form.querySelectorAll('select');
					selects.forEach(select => {
						if (select.name) {
							result[select.name] = select.value;
						}
					});

					// 获取所有textarea元素
					const textareas = form.querySelectorAll('textarea');
					textareas.forEach(textarea => {
						if (textarea.name) {
							result[textarea.name] = textarea.value;
						}
					});
				}

				return result;
			},
			invoiceFollowList() {


				var that = this;
				console.log('开始请求API...');
				uni.request({
					url: "/shyb/api.jsp",
					method: 'GET',
					data: {
						page: 1
					},
					success: (res) => {
						console.log('请求成功：', res);
						if (res.statusCode === 200) {
							// console.log('数据：', res.data);
							that.cusapplyList = res.data.cusapplyList;
							uni.setStorageSync('cusapplyList', res.data.cusapplyList);
							that.categories = res.data.basicmessList;
							uni.setStorageSync('basicmessList', res.data.basicmessList);
							uni.setStorageSync('productList', res.data.productList)
							that.categories.unshift({
								id: 0,
								name: "全部",
								type: 1,
								usable: 1,
							});
							that.productAllGoods(res.data)

						} else {
							// uni.showToast({
							// 	title: '请求失败：' + res.statusCode,
							// 	icon: 'none'
							// });
						}
					},
					fail: (err) => {
						// console.error('请求错误：', err);
						// uni.showToast({
						// 	title: '网络请求失败',
						// 	icon: 'none'
						// });
					}
				});

				uni.request({
					url: '/shyb/logon.do?p=login&username=admin&password=12345',
					method: 'GET',
					success: (res) => {
						// console.log(res)
						// 累计欠款
						that.leijiqiankuanapi()
						// 日报
						const date = new Date();
						const year = date.getFullYear(); // 年（2025）
						const month = date.getMonth() + 1; // 月（1-12，需+1，因为 getMonth() 返回 0-11）
						const day = date.getDate(); // 日（1-31）

						// 格式化为 2025-4-24（不补零，月份/日期为个位数时直接显示）
						const formattedDate = `${year}-${month}-${day}`;
						console.log(formattedDate); // 输出：2025-4-24
						that.ribaoapi(formattedDate, formattedDate);
						// 库存报表
						that.kucunapi();

					},
					fail: (err) => {
						// 累计欠款
						that.leijiqiankuanapi()
						// 日报
						const date = new Date();
						const year = date.getFullYear(); // 年（2025）
						const month = date.getMonth() + 1; // 月（1-12，需+1，因为 getMonth() 返回 0-11）
						const day = date.getDate(); // 日（1-31）

						// 格式化为 2025-4-24（不补零，月份/日期为个位数时直接显示）
						const formattedDate = `${year}-${month}-${day}`;
						console.log(formattedDate); // 输出：2025-4-24
						that.ribaoapi(formattedDate, formattedDate);
						// 库存报表
						that.kucunapi();

					}

				})
				uni.stopPullDownRefresh()

			},
			productAllGoods(data) {
				let basicmessList = data.basicmessList;
				// 动态生成 mergedData
				const mergedData = {};

				const productList = data.productList;

				// 初始化 mergedData 中的每个分类为空数组
				basicmessList.forEach((basicItem) => {
					mergedData[basicItem.name] = [];
				});

				productList.forEach((productItem) => {
					const category = basicmessList.find((basicItem) => basicItem.id === productItem.f_type_id);
					if (category) {
						const newItem = {
							...productItem,
							weight: 0,
							quantity: 0,
							price: '0', // 将价格设置为0
							note: '',
							lastSelect: 'quantity',
							unit: '只'
						};
						mergedData[category.name].push(newItem);
					}
				});

				console.log(mergedData);
				this.allGoods = mergedData;
				this.calculateTotal();
				this.guadanapi()
			},
			leijiqiankuanapi() {
				// 累计欠款
				uni.request({
					url: '/shyb/sale/saleorder.do?p=arrmoney1',
					method: 'GET',
					responseType: 'arraybuffer',
					success: (res) => {
						// console.log(res)
						const buffer = new Uint8Array(res.data);
						// 使用 iconv-lite 将 GB2312 编码的数据转换为 UTF-8 编码的字符串
						const decodedData = iconv.decode(buffer, 'gb2312');
						// console.log(decodedData);
						const parser = new DOMParser();
						const doc = parser.parseFromString(decodedData, 'text/html');
						const bodyContent = doc.body.innerHTML;
						const htmlWithoutStyles = this.removeInlineStyles(decodedData);
						const jsonData = this.htmlToJson(htmlWithoutStyles);
						// this.qiankuanjsonlist = jsonData[3];
						let data = jsonData[3];
						let sortableData = data.slice(1, -1);

						sortableData.sort((a, b) => {
							const amountA = parseFloat(a.cell8.replace(/,/g, '').replace(/总欠款:/g, ''));
							const amountB = parseFloat(b.cell8.replace(/,/g, '').replace(/总欠款:/g, ''));
							return amountB - amountA;
						});

						this.qiankuanjsonlist = [data[0], ...sortableData, data[data.length - 1]];
						console.log(jsonData);
						// console.log(bodyContent);
						this.qiankuanbody = htmlWithoutStyles;


					},
					fail: (err) => {
						console.log(res)
					}
				})
			},
			ribaoapi(bdate = '2025-4-22', edate = '2025-4-24') {

				uni.request({
					url: '/shyb/sale/saleorder.do?p=dayreport&fun=&bdate=' + bdate +
						'&hour=00&min=00&mm=00&edate=' + edate +
						'&hour1=23&min1=59&mm1=59&source=-1',
					method: 'GET',
					responseType: 'arraybuffer',
					success: (res) => {
						const buffer = new Uint8Array(res.data);
						const decodedData = iconv.decode(buffer, 'gb2312');
						const parser = new DOMParser();
						const doc = parser.parseFromString(decodedData, 'text/html');

						const tables = doc.getElementsByTagName('table');

						// 移除第一个table标签
						if (tables.length > 0) {
							console.log('找到table标签，准备移除第一个');
							const firstTable = tables[0];
							if (firstTable.parentNode) {
								firstTable.parentNode.removeChild(firstTable);
								console.log('成功移除第一个table标签');
							} else {
								console.log('table没有父节点');
							}
						} else {
							console.log('没有找到table标签');
						}

						const htmlWithoutStyles = this.removeInlineStyles(doc.body.innerHTML);
						const jsonData = this.htmlToJson(htmlWithoutStyles);
						console.log(jsonData);
						this.ribaodata = htmlWithoutStyles;
					},
					fail: (err) => {
						console.log(res)
					}
				})

			},

			kucunapi(bdate = this.getCurrentDate()) {
				// 日库存报表
				uni.request({
					url: '/shyb/daystock/daystock.do?p=list&type=1&edate=' + bdate +
						'&hour1=23&min1=59&mm1=59&flag=0',
					method: 'GET',
					responseType: 'arraybuffer',
					success: (res) => {
						const buffer = new Uint8Array(res.data);
						const decodedData = iconv.decode(buffer, 'gb2312');
						const parser = new DOMParser();
						const doc = parser.parseFromString(decodedData, 'text/html');

						const tables = doc.getElementsByTagName('table');

						// 移除第一个table标签
						if (tables.length > 0) {
							console.log('找到table标签，准备移除第一个');
							const firstTable = tables[0];
							if (firstTable.parentNode) {
								firstTable.parentNode.removeChild(firstTable);
								console.log('成功移除第一个table标签');
							} else {
								console.log('table没有父节点');
							}
						} else {
							console.log('没有找到table标签');
						}

						const htmlWithoutStyles = this.removeInlineStyles(doc.body.innerHTML);
						const jsonData = this.htmlToJson(htmlWithoutStyles);
						console.log(jsonData);
						this.kucundata = htmlWithoutStyles;
					},
					fail: (err) => {
						console.log(res)
					}
				})
			},



			onMainTabChange(item) {
				// console.log(item)

				this.currentTab = item.index;
			},
			onGoodsTabChange(item) {
				// console.log(item)
				this.currentGoodsTab = item.index;
			},
			onSearch(value) {
				this.searchKeyword = value;
			},
			onWeightChange(good, value) {
				good.weight = value;
				good.lastSelect = 'weight';
				if (value > 0) {
					good.quantity = 0; // Reset quantity when weight is set
				}
				this.$nextTick(() => {
					this.calculateTotal();
				});
			},
			onQuantityChange(good, value) {
				good.quantity = value;
				good.lastSelect = 'quantity';
				if (value > 0) {
					good.weight = 0; // Reset weight when quantity is set
				}
				this.$nextTick(() => {
					this.calculateTotal();
				});
			},
			onPriceChange(good, event) {
				// 确保输入的是有效数字
				const value = event.detail.value;
				if (value === '' || isNaN(value)) {
					good.price = '';
				} else {
					// 保留两位小数
					good.price = parseFloat(value);
				}
				this.calculateTotal();
			},
			calculateTotal() {
				let items = 0;

				Object.values(this.allGoods).forEach(goods => {
					goods.forEach(good => {
						if (good.weight > 0 || good.quantity > 0) {
							items++;
						}
					});
				});

				this.totalItems = items;
			},
			showConfirmDialog() {
				console.log(this.currentCustomer);
				console.log(this.currentCustomer.cno);
				if (!this.currentCustomer || !this.currentCustomer.cno) {
					uni.showToast({
						title: '请选择客户',
						icon: 'none'
					});
					return;
				}
				if (this.selectedGoods.length === 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
					return;
				}


				this.showConfirm = true;
			},

			closeGuadan() {
				this.showGuadan = false;
			},
			submitGuaOrder() {
				console.log('点击了提交挂单按钮');
				this.showGuadan = false;

				uni.showLoading({
					title: '提交中...'
				})
				const postdata = {}
				postdata.f_user_id = this.currentCustomer.cno
				postdata.type = 0;
				postdata.flag = '';
				postdata.p = 'money';

				this.saledataList.forEach(item => {
					postdata['weight_' + item.id] = item.weight
					postdata['price_' + item.id] = item.price
					postdata['num_' + item.id] = item.num
					postdata['memo_' + item.id] = item.memo
				})
				// 


				console.log(postdata)
				// uni.hideLoading();
				// return;
				// weight_11065=12.0&price_11065=20.0&num_11065=3&memo_11065=&
				// weight_11061=33.0&price_11061=20.0&num_11061=10&memo_11061=&
				// weight_11052=10.0&price_11052=15.0&num_11052=15&memo_11052=&
				// weight_11049=20.0&price_11049=140.0&num_11049=1&memo_11049=



				uni.request({
					url: '/shyb/sale/sale.do',
					method: 'GET',
					data: postdata,
					responseType: 'arraybuffer',
					success: (res) => {
						// console.log(res);


						const buffer = new Uint8Array(res.data);
						const decodedData = iconv.decode(buffer, 'gb2312');
						const parser = new DOMParser();
						// console.log(decodedData);
						const doc = parser.parseFromString(decodedData, 'text/html');
						// 修改获取 form 的方式
						const form = doc.querySelector('form');
						let htmlWithoutStyles = '';
						if (form) {
							htmlWithoutStyles = this.removeInlineStyles(form.outerHTML);
							// console.log('Form HTML:', htmlWithoutStyles);
							// this.kucundata = htmlWithoutStyles;
						} else {
							console.log('No form found in response');
							// 如果找不到 form，显示整个响应内容
							htmlWithoutStyles = this.removeInlineStyles(doc.body.innerHTML);
							// console.log('Full response:', htmlWithoutStyles);
							// this.kucundata = htmlWithoutStyles;
						}
						const jsonData = this.formToJson(htmlWithoutStyles);
						console.log(jsonData);
						this.ruzhangapi(jsonData)
						// console.log('Decoded data:', decodedData);
					},
					fail: (err) => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: '提交失败',
							icon: 'none'
						});
					}
				})



			},


			closeConfirm() {
				this.showConfirm = false;
			},


			convertToGB2312UrlEncoded(str) {
				if (!str) {
					return '';
				}
				// 将字符串转换为 GB2312 编码的字节数组
				const gb2312Buffer = iconv.encode(str, 'gb2312');
				// 将字节数组转换为十六进制字符串
				const hexString = gb2312Buffer.toString('hex');
				// 将十六进制字符串转换为 %XX 格式的 URL 编码
				const urlEncoded = hexString.match(/.{2}/g).map(byte => `%${byte.toUpperCase()}`).join('');
				return urlEncoded;
			},
			addcusApi(){
				const postdata = {
					p: 'addcus',
					f_status_id: 0,
					type: 0,
					flag: 0,
					w_type_id:1,
					flay:0.0,
					water:1,
					f_stock_id:0,
					cname: this.convertToGB2312UrlEncoded(this.currentCustomer.name),
					f_cus: this.currentCustomer.cno,
					zjm1: this.currentCustomer.zjm,		
					saleno1: '',
					ca: 1,
					wid: 0,
					pzjm: '',
					f_user_id:'',
					id:'',
					f_pro_id2:'',
					img:'',
					f_pro_id:'',
					pname:'',
					 memo:'',
				weight:'',
					price:''
					
					
				}
				
				// num:
				// water:1
				// f_stock_id:0

				
				
				// 构建查询字符串
				let queryString = Object.keys(postdata)
					.map(key => `${key}=${postdata[key]}`)
					.join('&');
					
				console.log(queryString);
				var surl='/shyb/sale/sale.do?' + queryString;
				
				uni.request({
					url: surl,
					method: 'get',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=gb2312'
					},
					success(res) {
						console.log(res);
						resolve();
					},
					fail(res) {
						console.log(res);
						reject(res);
					}
				});
			},

			async submitOrder() {
				uni.showLoading({
					title: '挂单中'
				})

				for (let i = 0; i < this.selectedGoods.length; i++) {
					const good = this.selectedGoods[i];
					console.log(good);
					const postdata = {
						p: 'add',
						type: 0,
						flag: 0,
						f_user_id: this.currentCustomer.cno,
						w_type_id: 1,
						flay: 0.0,
						water: 1,
						f_stock_id: 0,
						id: '',
						f_pro_id2: '',
						img: '',
						ca: 1,
						wid: 0,
						pzjm: good.zjm,
						f_pro_id: good.pno,
						pname: this.convertToGB2312UrlEncoded(good.name),
						memo: this.convertToGB2312UrlEncoded(good.note || ''),
						weight: good.weight,
						flay: 0.0,
						price: '0', // 设置价格为0
						f_status_id: 0,
						num: good.quantity,
						water: 1,
						zjm1: good.zjm,
						cname: this.convertToGB2312UrlEncoded(this.currentCustomer.name),
						f_cus: this.currentCustomer.cno,
						saleno1: ''
					}

					// 构建查询字符串
					let queryString = Object.keys(postdata)
						.map(key => `${key}=${postdata[key]}`)
						.join('&');
						
					console.log(queryString);
					var surl='/shyb/sale/sale.do?' + queryString;
					console.log(surl)
					// uni.request({
					// 		url: surl,
					// 		method: 'get',
					// 		header: {
					// 			'Content-Type': 'application/x-www-form-urlencoded;charset=gb2312'
					// 		},
					// 		success(res) {
					// 			console.log(res);
					// 			// resolve();
					// 		},
					// 		fail(res) {
					// 			console.log(res);
					// 			// reject(res);
					// 		}
					// 	});
					// 使用Promise包装请求
					await new Promise((resolve, reject) => {
						uni.request({
							url: surl,
							method: 'get',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded;charset=gb2312'
							},
							success(res) {
								console.log(res);
								resolve();
							},
							fail(res) {
								console.log(res);
								reject(res);
							}
						});
					});
					
					// 等待0.5秒
					await new Promise(resolve => setTimeout(resolve, 500));
				}
				
				setTimeout(this.guadanapi, 2000);
				this.closeConfirm();
				uni.hideLoading();
			},
			ruzhangapi(zhangdandata) {
				// 入账
				// zhangdandata = {
				// 	cd: "1",
				// 	f_cus_id: "",
				// 	f_user_id: "104",
				// 	id: "",
				// 	name: "",
				// 	realmoney: "559.0",
				// 	receivemoney: "559.0",
				// 	rz: "现金入帐",
				// 	saleman: "",
				// 	type: "0",
				// 	yh: "0",
				// 	zjm: "",
				// 	zl: "",
				// 	zq: "返    回",
				// 	ztype: "4",
				// };
				zhangdandata['p'] = 'addMoney';
				zhangdandata['func'] = 'set';

				// /shyb/sale/saleorder.do?p=addMoney&func=set

				// f_user_id=134&type=0&id=&realmoney=20000.0&receivemoney=20000.0&yh=0&zl=0&zjm=&f_cus_id=134&name=&saleman=&ztype=3&cd=0
				// realmoney=20000.0应付
				//receivemoney=20000.0实收
				// zl=找零
				// ztype=现金类型   1 2 3 4
				// cd=是否出单 0 1

				uni.request({
					url: '/shyb/sale/saleorder.do',
					data: zhangdandata,
					method: 'GET',
					success(res) {
						console.log(res);
						uni.hideLoading();
						// this.goodsList = [];
						this.selectedGoods = [];
						this.totalPrice = 0;
						uni.showToast({
							title: '入账成功',
							icon: 'success'
						});
					},
					fail(res) {
						console.log(res);
					}
				})



			},
			guadanapi() {
				if (this.currentCustomer && this.currentCustomer.cno) {
					const that = this;
					console.log('开始请求API...');
					uni.request({
						url: '/shyb/apisaledata.jsp',
						method: 'GET',
						data: {
							f_user_id: this.currentCustomer.cno
						},
						success(res) {
							// console.log(res);
							// console.log('数据：', res.data);
							uni.hideLoading();
							that.saledataList = res.data.saledataList;
							// console.log('数据：', res.data.saledataList);
							// console.log('数据：', this.saledataList);

							const cusapplyList = uni.getStorageSync('cusapplyList')
							const basicmessList = uni.getStorageSync('basicmessList')
							const productList = uni.getStorageSync('productList')
							// console.log(cusapplyList, basicmessList, productList)
							that.saledataList.forEach(item => {
								const prod = productList.find(product => product.pno == item
									.f_pro_id);
								console.log(prod);
								item.pname = prod.name;

							})
							that.showGuadan = true;
							if (that.saledataList.length == 0) {
								setTimeout(function() {
									that.showGuadan = false;
								}, 500)
							} else {
								// uni.showToast({
								// 	title:'cccc'
								// })
							}


						},
						fail(res) {
							console.log(res);
						}
					})
				}
			},


			toggleFooter() {
				this.showFooter = !this.showFooter;
			},
			onCustomerSearch() {
				if (!this.customerName) {
					this.filteredCustomers = [];
					return;
				}

				const searchText = this.customerName.toLowerCase();
				this.filteredCustomers = this.cusapplyList.filter(customer => {
					return customer.name.toLowerCase().includes(searchText) ||
						(customer.shortname && customer.shortname.toLowerCase().includes(searchText)) ||
						(customer.zjm && customer.zjm.toLowerCase().includes(searchText));
				}).slice(0, 10); // 限制显示前10个结果
			},

			selectCustomer(customer) {
				this.currentCustomer = customer;
				this.customerName = customer.name;
				this.customerPhone = customer.telephone || '';
				this.carNumber = customer.address || '';
				this.driverPhone = customer.mobile || '';
				this.showCustomerList = false;
				
				// 清空所有已选择的商品数据
				Object.values(this.allGoods).forEach(goods => {
					goods.forEach(good => {
						good.weight = 0;
						good.quantity = 0;
						good.note = '';
					});
				});
				this.addcusApi()
				// 重新计算总数
				this.calculateTotal();
				
				console.log(customer);
				this.guadanapi();
				this.searchqiankuanlist();
			},
			searchqiankuanlist() {
				let that = this;
				uni.request({
					url: '/shyb/sale/saleorder.do?p=cquery&f_user_id=' + this.currentCustomer.cno,
					method: 'GET',
					responseType: 'arraybuffer',
					success(res) {
						console.log(res)
						const buffer = new Uint8Array(res.data);
						// 使用 iconv-lite 将 GB2312 编码的数据转换为 UTF-8 编码的字符串
						const decodedData = iconv.decode(buffer, 'gb2312');
						// console.log(decodedData);
						const parser = new DOMParser();
						// const doc = parser.parseFromString(decodedData, 'text/html');
						// const bodyContent = doc.body.innerHTML;
						const htmlWithoutStyles = that.removeInlineStyles(decodedData);
						const jsonData = that.htmlToJson(htmlWithoutStyles);
								console.log(jsonData);
						that.persinalQianKuan = jsonData[4].slice(2, -2);
						let totalarray=jsonData[4].slice(-2,-1)[0]
						console.log(totalarray)
						
						 console.log(totalarray.cell0)
						 that.totalAmount=totalarray.cell0;
						 that.totalAmount=that.totalAmount.replace(/,/g,'')
						 that.totalAmount=that.totalAmount.replace(/总欠款:/g,'')
				
						 // persinalQianKuan
					},
					fail(res) {
						console.log(res)
					}
				})
			},
			showRepaymentDialog(qiankuan) {
				this.currentRepayment = qiankuan;
				console.log(qiankuan)
				const totalAmount = parseFloat(qiankuan.cell4) - parseFloat(qiankuan.cell5);
				this.repaymentAmount = totalAmount.toFixed(2);
				this.discountAmount = '0.00';
				this.paymentMethod = 0; // 默认选择现金
				this.showRepayment = true;
			},
			closeRepayment() {
				this.showRepayment = false;
			},
			// submitRepayment() {
				
			// },
			onPaymentConfirm(e) {
				console.log(e)
				// 获取选中的付款方式索引
				const selectedIndex = e.indexs[0];
				this.paymentMethod = selectedIndex;
				this.showPaymentPicker = false;
			},
			submitRepayment(){
				// 这里添加提交还款的逻辑
				console.log('还款信息：', {
					transactionId: this.currentRepayment.cell3,
					paymentMethod: this.paymentMethod,
					repaymentAmount: this.repaymentAmount,
					discountAmount: this.discountAmount
				});
				this.transactionId=this.currentRepayment.cell3
				
				uni.showLoading({
					title: '正在还款'
				});
				
				let zhangdandata = [];
				zhangdandata['p'] = 'add';
				zhangdandata['mtype'] = this.paymentMethod;
				zhangdandata['cid'] = this.transactionId;
				zhangdandata['money_' + this.transactionId] = this.repaymentAmount;
				zhangdandata['mmoney_' + this.transactionId] = this.discountAmount;
				// mtype=1
				// &cid=1250108009&money_1250108009=547&mmoney_1250108009=0
				// &cid=1250109009&money_1250109009=853&mmoney_1250109009=0&fp=0&hqk=1480.0
				
				let queryString = Object.keys(zhangdandata).map(key => `${key}=${zhangdandata[key]}`).join('&');
				let that=this;
				uni.request({
					url: '/shyb/fee/fee.do?' + queryString,
					method: 'GET',
					responseType: 'arraybuffer',
					success(res) {
						console.log(res)
						
						const buffer = new Uint8Array(res.data);
						// 使用 iconv-lite 将 GB2312 编码的数据转换为 UTF-8 编码的字符串
						const decodedData = iconv.decode(buffer, 'gb2312');
						// console.log(decodedData);
						const parser = new DOMParser();
						// const doc = parser.parseFromString(decodedData, 'text/html');
						// const bodyContent = doc.body.innerHTML;
						// const htmlWithoutStyles = that.removeInlineStyles(decodedData);
						// const jsonData = that.htmlToJson(htmlWithoutStyles);
						// console.log(jsonData);
						// this.searchqiankuanlist();
						uni.hideLoading();
						uni.showToast({
							title: '还款成功',
							icon:'success'
						});
						that.showRepayment = false;
					},
					fail(res) {
						console.log(res)
					}
				})
			},
			onRepaymentAmountChange(e) {
				const totalAmount = parseFloat(this.currentRepayment.cell4) - parseFloat(this.currentRepayment.cell5);
				let repaymentAmount = parseFloat(e.detail.value) || 0;
				
				// 限制还款金额不能小于0且不能大于总金额
				repaymentAmount = Math.max(0, Math.min(repaymentAmount, totalAmount));
				this.repaymentAmount = repaymentAmount.toFixed(2);
				this.discountAmount = (totalAmount - repaymentAmount).toFixed(2);
			},
			onDiscountAmountChange(e) {
				const totalAmount = parseFloat(this.currentRepayment.cell4) - parseFloat(this.currentRepayment.cell5);
				let discountAmount = parseFloat(e.detail.value) || 0;
				
				// 限制抹款金额不能小于0且不能大于总金额
				discountAmount = Math.max(0, Math.min(discountAmount, totalAmount));
				this.discountAmount = discountAmount.toFixed(2);
				this.repaymentAmount = (totalAmount - discountAmount).toFixed(2);
			},
			onStartDateChange(e) {
				this.startDate = e.detail.value;
			},
			onEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			searchReport() {
				this.ribaoapi(this.startDate, this.endDate);
			},
			onKucunDateChange(e) {
				this.kucunDate = e.detail.value;
			},
			searchKucun() {
				console.log(this.kucunDate);
				this.kucunapi(this.kucunDate);
			},
			getCurrentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.customer-info {
		background-color: #ffffff;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

		.search-row {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.label {
				font-size: 28rpx;
				color: #303133;
				min-width: 140rpx;
			}

			.search-input-wrapper {
				position: relative;
				flex: 1;
				margin: 0 20rpx;
			}

			.customer-input {
				width: 100%;
				height: 80rpx;
				border: 2rpx solid #e4e7ed;
				padding: 0 20rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				background-color: #f5f7fa;
			}

			.customer-dropdown {
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background: #ffffff;
				border-radius: 8rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
				z-index: 999;
				max-height: 600rpx;
				overflow-y: auto;
				margin-top: 4rpx;

				.customer-item {
					padding: 20rpx;
					border-bottom: 2rpx solid #f0f2f5;
					cursor: pointer;
					transition: background-color 0.3s;

					&:last-child {
						border-bottom: none;
					}

					&:hover {
						background-color: #f5f7fa;
					}

					.customer-info-main {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.customer-name {
							font-size: 28rpx;
							color: #303133;
							font-weight: 500;
						}

						.customer-code {
							font-size: 24rpx;
							color: #909399;
							margin-left: 10rpx;
						}
					}

					.customer-info-sub {
						display: flex;
						gap: 20rpx;

						.customer-shortname,
						.customer-phone {
							font-size: 24rpx;
							color: #909399;
						}
					}
				}
			}

			.search-btn {
				margin-left: 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				font-size: 24rpx;
				width: 120rpx;
			}
		}

		.info-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.info-item {
				display: flex;
				align-items: center;

				.label {
					font-size: 26rpx;
					color: #606266;
					margin-right: 10rpx;
				}

				.value {
					font-size: 26rpx;
					color: #303133;
				}
			}
		}

		.amount-row {
			margin-top: 30rpx;
			padding-top: 20rpx;
			border-top: 2rpx solid #f0f2f5;

			.amount-info {
				display: flex;
				align-items: center;

				.label {
					font-size: 28rpx;
					color: #606266;
				}

				.amount {
					font-size: 36rpx;
					color: #ff4d4f;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}

			.repay-btn {
				margin-left: auto;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 20rpx;
				font-size: 24rpx;
				width: 100rpx;
			}
		}
	}

	.goods-tabs {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.search-box {
		padding: 12rpx 20rpx;
		background-color: #ffffff;
		border-bottom: 2rpx solid #f0f2f5;
	}

	.goods-list {
		padding: 0 20rpx;
		background: #fff;
		min-height: 200rpx;

		.empty-tip {
			text-align: center;
			padding: 40rpx 0;
			color: #909399;
			font-size: 28rpx;
		}

		.goods-item {
			padding: 24rpx;
			border-bottom: 2rpx solid #f0f2f5;
			background: #fff;
			margin-bottom: 12rpx;
			border-radius: 8rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

			&:last-child {
				margin-bottom: 0;
			}

			.goods-main {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 16rpx;
			}

			.goods-info {
				flex: 1;
				margin-right: 20rpx;

				.goods-name {
					font-size: 42rpx;
					color: #303133;
					font-weight: 500;
					line-height: 1.4;
					margin-bottom: 4rpx;
				}
			}

			.goods-operation {
				flex: 0 0 auto;
				width: 65%;

				.number-inputs {
					display: flex;
					flex-direction: column;
					gap: 12rpx;

					.input-row {
						display: flex;
						gap: 20rpx;
						align-items: center;
					}

					.input-group {
						display: flex;
						align-items: center;
						flex: 1;

						&.price-group {
							flex: 0.6;
						}

						.unit-label {
							font-size: 38rpx;
							color: #606266;
							width: 60rpx;
							white-space: nowrap;
						}

						.price-input {
							flex: 1;
							height: 56rpx;
							background-color: #f5f7fa;
							border-radius: 4rpx;
							display: flex;
							align-items: center;
							padding: 0 10rpx;

							.price-field {
								width: 100%;
								height: 100%;
								font-size: 28rpx;
								color: #303133;
								text-align: right;
							}
						}
					}
				}
			}

			.goods-note {
				margin-top: 16rpx;
				padding-top: 16rpx;
				border-top: 2rpx solid #f0f2f5;

				.note-input {
					width: 100%;
					height: 56rpx;
					background-color: #f5f7fa;
					border-radius: 4rpx;
					padding: 0 16rpx;
					font-size: 24rpx;
					color: #303133;
				}
			}
		}
	}

	.price-info {
		display: none;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
		z-index: 99;

		.order-info {
			.total-items {
				font-size: 28rpx;
				color: #606266;
				margin-right: 20rpx;
			}

			.total-price {
				font-size: 32rpx;
				color: #ff4d4f;
				font-weight: bold;
			}
		}

		.submit-btn {
			min-width: 200rpx;
		}
	}

	.confirm-dialog {
		width: 600rpx;
		padding: 30rpx;
		background-color: #fff;

		.dialog-title {
			font-size: 46rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.order-details {
			max-height: 600rpx;
			overflow-y: auto;

			.detail-item {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #f0f2f5;

				.good-name {
					font-size: 42rpx;
					color: #303133;
					display: block;
					margin-bottom: 10rpx;
				}

				.good-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 38rpx;
					color: #f56c6c;
				}

				.good-note {
					font-size: 36rpx;
					color: #f56c6c;
					margin-top: 8rpx;
					display: block;
				}
			}
		}

		.dialog-footer {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.u-button {
				width: 45%;
			}
		}
	}

	.qiankuan-table {
		width: 100%;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		margin: 20rpx;
		display: flex;
		flex-direction: column;
		height: calc(100vh - 300rpx);

		.table-header {
			display: flex;
			background-color: #2979ff;
			border-bottom: 2rpx solid #ebeef5;
			position: sticky;
			top: 0;
			z-index: 1;

			.header-cell {
				flex: 1;
				padding: 24rpx 20rpx;
				font-size: 28rpx;
				color: #ffffff;
				font-weight: bold;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.table-body {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx;

			.table-row {
				background: #ffffff;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
				overflow: hidden;

				.row-content {
					padding: 20rpx;
				}

				.row-main {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #f0f2f5;

					.main-info {
						.customer-name {
							font-size: 32rpx;
							color: #303133;
							font-weight: bold;
							margin-right: 20rpx;
						}

						.customer-id {
							font-size: 26rpx;
							color: #409eff;
						}
					}

					.amount-info {
						.total-amount {
							font-size: 32rpx;
							color: #f56c6c;
							font-weight: bold;
						}
					}
				}

				.row-details {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;

					.detail-item {
						flex: 1;
						min-width: 200rpx;
						display: flex;
						align-items: center;

						.label {
							font-size: 26rpx;
							color: #909399;
							margin-right: 10rpx;
						}

						.value {
							font-size: 26rpx;
							color: #606266;
						}
					}
				}
			}
		}

		.table-footer {
			background-color: #f5f7fa;
			border-top: 2rpx solid #ebeef5;
			position: sticky;
			bottom: 0;
			z-index: 1;
			padding: 20rpx;
			transition: all 0.3s ease;

			&.footer-collapsed {
				padding: 0;
			}

			.footer-toggle {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				background: #ffffff;
				border-radius: 12rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
				cursor: pointer;
				transition: all 0.3s ease;

				&:active {
					background: #f5f7fa;
				}

				.toggle-text {
					font-size: 28rpx;
					color: #606266;
					margin-right: 10rpx;
				}

				.toggle-icon {
					font-size: 24rpx;
					color: #909399;
					transition: transform 0.3s ease;

					&.icon-up {
						transform: rotate(180deg);
					}
				}

				.total-collapsed {
					display: flex;
					align-items: center;
					margin-left: auto;
					padding-left: 20rpx;
					border-left: 2rpx solid #ebeef5;

					.label {
						font-size: 28rpx;
						color: #303133;
						font-weight: bold;
						margin-right: 10rpx;
					}

					.value {
						font-size: 32rpx;
						color: #f56c6c;
						font-weight: bold;
					}
				}
			}

			.footer-content {
				margin-top: 20rpx;
				background: #ffffff;
				border-radius: 12rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
				padding: 20rpx;

				.footer-main {
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #f0f2f5;

					.footer-title {
						font-size: 32rpx;
						color: #303133;
						font-weight: bold;
					}
				}

				.footer-details {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;

					.detail-item {
						flex: 1;
						min-width: 200rpx;
						display: flex;
						align-items: center;

						.label {
							font-size: 26rpx;
							color: #909399;
							margin-right: 10rpx;
						}

						.value {
							font-size: 26rpx;
							color: #606266;
						}

						&.total {
							flex: 0 0 100%;
							justify-content: flex-end;
							margin-top: 20rpx;
							padding-top: 20rpx;
							border-top: 2rpx solid #f0f2f5;

							.label {
								font-size: 28rpx;
								color: #303133;
								font-weight: bold;
							}

							.value {
								font-size: 32rpx;
								color: #f56c6c;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}

	.qiankuan-item {
		background: #ffffff;
		padding: 24rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

		.qiankuan-header {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			padding-bottom: 16rpx;
			border-bottom: 2rpx solid #f0f2f5;

			.serial-number {
				font-size: 24rpx;
				color: #909399;
				margin-right: 16rpx;
			}

			.customer-name {
				font-size: 30rpx;
				color: #303133;
				font-weight: 500;
				flex: 1;
			}

			.transaction-id {
				font-size: 24rpx;
				color: #409eff;
			}
		}

		.qiankuan-details {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;

			.amount-info {
				display: flex;
				align-items: center;

				.label {
					font-size: 26rpx;
					color: #606266;
					margin-right: 8rpx;
				}

				.amount {
					font-size: 28rpx;
					color: #f56c6c;
					font-weight: 500;
				}
			}
		}

		.qiankuan-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #909399;

			.time {
				color: #909399;
			}
		}
	}

	.repayment-dialog {
		width: 700rpx;
		padding: 30rpx;
		background-color: #fff;

		.dialog-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.dialog-content {
			max-height: 600rpx;
			overflow-y: auto;

			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.label {
					font-size: 28rpx;
					color: #606266;
					width: 140rpx;
				}

				.value {
					font-size: 28rpx;
					color: #303133;
				}
			}

			.form-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.label {
					font-size: 28rpx;
					color: #606266;
					width: 140rpx;
				}

				.amount-input {
					flex: 1;
					height: 60rpx;
					background-color: #f5f7fa;
					border-radius: 8rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #303133;
				}

				&.payment-methods {
					align-items: flex-start;

					.radio-group {
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						gap: 20rpx;

						.u-radio {
							width: 200rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}

		.dialog-footer {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.u-button {
				width: 45%;
			}
		}
	}

	.payment-select {
		flex: 1;
		height: 80rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #303133;
		display: flex;
		align-items: center;
	}

	.amount-input {
		flex: 1;
		height: 80rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		color: #303133;
	}

	.picker-value {
		width: 100%;
	}

	.repayment-btn {
		width: 120rpx !important;
		height: 50rpx !important;
		line-height: 50rpx !important;
		padding: 0 20rpx !important;
		font-size: 24rpx !important;
	}

	.date-filter {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		margin: 0;
		padding: 20rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1);
		.customer-info-title {
			padding-bottom: 180rpx;
		}
		.filter-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.filter-item {
				flex: 1;
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}

				.label {
					font-size: 28rpx;
					color: #606266;
					margin-right: 10rpx;
					white-space: nowrap;
				}

				.date-picker {
					flex: 1;
					height: 60rpx;
					background-color: #f5f7fa;
					border-radius: 8rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;

					.picker-value {
						font-size: 28rpx;
						color: #303133;
					}
				}
			}
		}

		.filter-actions {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;

			.u-button {
				width: 160rpx;
			}
		}
	}
</style>